<template>
    <div class="shopcar-container">
        <div class="goods-list">
        <div class="mui-card" v-for="(item,i) in shocargoods" :key="item.id">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <mt-switch
                            v-model="$store.getters.getGoodsSelected[item.id]"
                            @change="selectedChanged(item.id,$store.getters.getGoodsSelected[item.id])"
                    ></mt-switch>
                    <img :src="item.img_url" alt="">
                    <div class="info">
                        <h1>{{item.title}}</h1>
                        <p><span class="price">
                             ￥{{item.sell_price}}
                            <numbox :initcount="$store.getters.getGoodsCount[item.id]" :goodsid="item.id"></numbox>
                        </span><a href="#" @click.prevent="remove(item.id,i)">删除{{ $store.getters.getGoodsCount[item.id] }}</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
            <p>{{ $store.getters.getGoodsSelected }}</p>
        </div>

        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>总计</p>
                    <p>已勾选数量<span class="red">{{ $store.getters.getGoodsCountAndAmount.count }}</span>
                        <span class="red">
                        {{ $store.getters.getGoodsCountAndAmount.amount }}
                    </span></p>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import numbox from "../subcomponents/shopcar_numbox.vue"

    export default {
        data(){
            return{
                shocargoods:[]
            }
        },
        created(){
            this.getshopcarGoods()
        },
        methods:{
         getshopcarGoods(){
           var idArr= []
             this.$store.state.car.forEach(item=>idArr.push(item.id))
             if (idArr.length<= 0)
             {
            return
             }
             idArr.forEach(item=>this.$http.get('java/goods/getinfo'+item +".json" ).then(result =>{
                 if(result.body.status === 0){
                     this.shocargoods = this.shocargoods.concat(result.body.message)
                 }
             }))
         },
            remove(id,index){
               this.shocargoods.splice(index,1);
               this.$store.commit('removeFromCar',id)
              },
            selectedChanged(id,val){
             console.log(id + "---" + val)
                this.$store.commit("updateGoodsSelected",{ id, selected:val })
            }
        },
        // name: "homeContainer"
        components:{
            numbox
        }
    }
</script>

<style scoped lang="scss">
  .shopcar-container{
      background-color: #eee;
      height: 100%;
      overflow: hidden;
  }
</style>